import React from "react";
import { Popover, Typography, List, Divider } from "antd";
import { useUsers } from "server";
import styled from "@emotion/styled";

const ContentContainer = styled.div`
  min-width: 30rem;
`;

const UserPopover = () => {
  const { data: users } = useUsers();

  const content = (
    <ContentContainer>
      <Typography.Text type="secondary">组员列表</Typography.Text>
      <List>
        {users?.map(({ name, id }) => (
          <List.Item key={id}>
            <List.Item.Meta title={name} />
          </List.Item>
        ))}
      </List>
      <Divider />
    </ContentContainer>
  );

  return (
    <Popover placement="bottom" content={content}>
      <span>成员</span>
    </Popover>
  );
};

export default UserPopover;
